<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>


    <title>主页</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">


    <style>
        html,body{
            margin: 0;
            padding: 0;
        }
        html{
            height: 100%;
        }
        .con{
            padding: 10px;
        }
        .conBody{
            width: 1200px;
            margin: auto;
        }
        .conTitle{
            display: flex;
            align-items: center;
            border: 1px dashed #ccc;
            margin-top: 10px;
        }
        .conTitle div:first-child{
            width: 200px;
            text-align: center;
            height: 100%;
        }
        .conTitle .el-button{
            margin-right: 10px;
        }
        .tableTips{
            font-size: 14px;
            color: #ccc;
            margin-top: 30px;
            margin-bottom: 10px;
        }
        .tableCon{
            border: 1px solid #EBEEF5;
            border-bottom: none;
        }
        .conList{
            padding: 10px 0;
            border-bottom: 1px solid #ccc;
            cursor: pointer;
        }
        .main-title {
          width: 1100px;
            margin: auto;
          position: relative;
          height: 48px;
          border-bottom: 2px solid #dcdcdc;
        }
        .main-title .title-contain {
          position: absolute;
          left: 0;
          top: 0;
          width: 150px;
          height: 50px;
          line-height: 50px;
          padding-right: 5px;
          color: #fff;
          background: #fff;
        }
        .main-title .title-contain h2 {
          background: #007dcd;
          font-size: 28px;
          text-align: center;
        }
        .marginb {
          margin-bottom: 50px;
        }
        .indexFlex{
            width: 1100px;
            margin: auto;
            display: flex;
            justify-content: space-between;
        }
        .indexFlexDiv{
            width: 500px;
        }
        .indexTitle{
            height: 25px;
            line-height: 24px;
            padding-left: 8px;
            border-left: 3px solid #007dcd;
            margin: 10px 0;
            color: #007dcd;
            font-size: 21px;
            overflow: hidden;
            font-weight: 400;
        }
        .indexCon{
            color: #666;
            width: 500px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .indexCon span:hover{
            text-decoration: underline;
        }
        #form{
            width: 100%;
            height: 100;
            background-color: rgba(0,0,0,.3);
            position: fixed;
            left: 0;
            top: 0;
            display: none;
            z-index: 99;
        }
        #form form{
            width: 1000px;
            height: 1500px;
            margin: auto;
            padding:5px 25px;
            border-radius: 10px;
            background-color: #fff;
        }
        .h2Con{
            color: #333;
            font-size: 32px;
            padding: 15px 0 12px;
            font-weight: 400;
        }
        .deTime{
            color: #999;
            font-size: 12px;
            border-bottom: 1px solid #ccc;
            margin-bottom: 20px;
        }
        .dedtailsCon{
            width: 1100px;
            margin: auto;
        }
        .dedtailsCon div span{
            cursor: pointer;
        }
        .dedtailsCon div span:hover{
            text-decoration: underline;
        }.avatar-uploader .el-upload {
             border: 1px dashed #d9d9d9;
             border-radius: 6px;
             cursor: pointer;
             position: relative;
             overflow: hidden;
         }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>

</head>

<body>
    <div id="indexApp">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-menu-item index="0">竞赛列表</el-menu-item>
          <el-menu-item index="1" v-if="isLogin">参加的竞赛</el-menu-item>
          <el-menu-item index="2" v-else>去登录</el-menu-item>
        </el-menu>
        <div v-show="activeIndex=='0'" class="con">
            <el-table
                    :data="chainStoreData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="name"
                        label="竞赛名字">
                </el-table-column>
                <el-table-column
                        prop="introduce"
                        label="竞赛简介">
                </el-table-column>
                <el-table-column
                        prop="details"
                        label="竞赛详情">
                </el-table-column>
                <el-table-column
                        label="竞赛类型">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type==1">线上</span>
                        <span v-else-if="scope.row.type==2">线下</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="竞赛规则">
                </el-table-column>
                <el-table-column
                        prop="url"
                        label="链接地址">
                </el-table-column>
                <el-table-column
                        prop="time"
                        label="竞赛时长">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope" width="100">
                        <el-button ref="editChainStore" type="text" size="small" @click="addPos(scope.row)">报名提交作品</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align:right;">
                <el-pagination
                        @current-change="handleChainStoreCurrentChange"
                        :current-page="pageChainStoreInit.currentPage"
                        :page-size="10"
                        layout="total, prev, pager, next, jumper"
                        :total="pageChainStoreInit.totalResult">
                </el-pagination>
            </div>
        </div>
        <div v-show="activeIndex=='1'" class="con">

            <el-table
                    :data="posData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="competition_name"
                        label="竞赛名称">
                </el-table-column>
                <el-table-column
                        prop="student_course_name"
                        label="参赛团队">
                </el-table-column>
                <el-table-column
                        prop="web_url"
                        label="网页地址">
                </el-table-column>
                <el-table-column
                        prop="details"
                        label="作品说明">
                </el-table-column>
                <el-table-column
                        prop="score"
                        label="评委打分">
                </el-table-column>
                <el-table-column
                        label="是否通过">
                    <template slot-scope="scope">
                        <span v-if="scope.row.is_pass==1">通过</span>
                        <span v-else-if="scope.row.is_pass==2">未通过</span>
                        <span v-else>待审核</span>
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope" width="100">
                        <el-button ref="editPos" type="text" size="small" v-if="scope.row.is_pass!=1" @click="editPos(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog
                :title="posTitle"
                :visible.sync="posFlag"
                width="50%">
            <el-form ref="posForm" :model="posForm" label-width="80px">
                <el-form-item label="作品链接地址">
                    <el-input v-model="posForm.web_url"></el-input>
                </el-form-item>
                <el-form-item label="参赛视频">
                    <el-upload
                            class="avatar-uploader"
                            :action=`${basePathUpdate}`
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess">
                        <video v-if="posForm.url!=''" :src="posForm.url" controls="controls" style="width: 300px;"></video>
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="作品说明">
                    <el-input type="textarea" v-model="posForm.details"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onPosSubmit">立即提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</body>

    <!-- 全局js -->
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script>
        var basePath="/"+window.location.pathname.split("/")[1];
        var indexApp=new Vue({
            el:"#indexApp",
            data(){
                return {
                    basePathUpdate:`${basePath}/upload`,
                    activeIndex:'0',
                    selIndex:'全部',
                    itemList:[],
                    tableData:[],
                    treeList:[],
                    itemData:[],
                    props:{
                        label: 'professional_type_name',
                        children: 'children',
                        isLeaf: 'leaf'
                    },
                    isListFlag:true,
                    contractData:[],
                    pageContractInit:{totalResult:10,currentPage:1},
                    contractInfo:{},
                    comment:[],
                    textarea:'',
                    contractUserData:[],
                    isLogin:false,
                    conInformation:{},
                    pageLeftInit:{},
                    pageRightInit:{},
                    leftInitData:[],
                    rightInitData:[],
                    isInformationList:true,

                    chainStoreData:[],
                    pageChainStoreInit:{totalResult:10,currentPage:1},
                    posTitle:'上传作品',
                    posFlag:false,
                    posForm:{},
                    posData:[],

                }
            },
            created(){
                var username=JSON.parse(localStorage.getItem('user'));
                if(username){
                    this.isLogin=true;
                }
            },
            mounted(){
                this.handleChainStoreCurrentChange(1);
            },
            methods:{
                handleSelect(key, keyPath) {
                    this.activeIndex=key;
                    if(key=='0'){
                        this.handleChainStoreCurrentChange(1)
                    }else if(key=='1'){
                        this.getPosData();
                    }else if(key=='2'){
                        window.location.href=basePath+"/idx_login";
                    }
                    this.$forceUpdate();
                },

                handleAvatarSuccess(res, file){
                    this.posForm.url=res.path;
                },
                handleChainStoreCurrentChange(val){
                    var that=this;
                    $.ajax({
                        type:"GET",
                        url:`${basePath}/course/getPageCourseList`,
                        data:{currentPage:val},
                        success:function(data){
                            that.chainStoreData=data.rows;
                            that.pageChainStoreInit.totalResult=data.total;
                            that.pageChainStoreInit.currentPage=val;
                        }
                    })
                },
                getPosData(){
                    var username=JSON.parse(localStorage.getItem('userInfo'));
                    let student_course_id = username.id;
                    var that=this;
                    $.ajax({
                        type:"GET",
                        url:`${basePath}/stp/getStudentTestPaperList`,
                        data:{student_course_id},
                        success:function(data){
                            that.posData=data.data;
                        }
                    })
                },
                addPos(row){
                    this.posTitle="报名上传作品";
                    var username=JSON.parse(localStorage.getItem('userInfo'));
                    this.posForm = {
                        teacher_user_id:row.id,
                        competition_name:row.name,
                        student_course_id:username.id,
                        student_course_name:username.NAME
                    }
                    this.posFlag = true;
                },
                editPos(row) {
                    this.posTitle="编辑作品";
                    this.posForm= row;
                    this.posFlag = true;
                },
                onPosSubmit(){
                    var that=this;
                    if(this.posTitle=='报名上传作品'){
                        $.ajax({
                            type:"GET",
                            url:`${basePath}/stp/addStudentTestPaper`,
                            data:that.posForm,
                            success:function(data){
                                that.posTitle='';
                                that.posFlag=false;
                                that.getPosData();
                            }
                        })

                    }else if(this.posTitle='编辑作品'){
                        $.ajax({
                            type:"GET",
                            url:`${basePath}/stp/updateStudentTestPaper`,
                            data:that.posForm,
                            success:function(data){
                                that.posTitle='';
                                that.posFlag=false;
                                that.getPosData();
                            }
                        })

                    }
                }

            }
        })

    </script>
</html>
